import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";
import earth from "@/assets/images/earth.jpg";
import "echarts-gl";
import axios from "axios";
let ROOT_PATH = "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
export default () => {
  const ref = useRef();
  /* ========== 获得攻击线路 ========== */
  const getJson = () => {
    const earchChar = echarts.init(ref.current);
    axios.get(`${ROOT_PATH}/data-gl/asset/data/flights.json`).then(({ data }) => {
      let airports = data.airports.map((item) => {
        return {
          coord: [item[3], item[4]],
        };
      });
      function getAirportCoord(idx) {
        return [data.airports[idx][3], data.airports[idx][4]];
      }
      let routesGroupByAirline = {};
      data.routes.forEach((route) => {
        let airline = data.airlines[route[0]];
        let airlineName = airline[0];
        if (!routesGroupByAirline[airlineName]) {
          routesGroupByAirline[airlineName] = [];
        }
        routesGroupByAirline[airlineName].push(route);
      });

      let pointsData = [];
      data.routes.forEach((airline) => {
        pointsData.push(getAirportCoord(airline[2]));
      });

      let series = data.airlines
        .filter((item) => item[0] === "China Eastern Airlines")
        .map((airline) => {
          let airlineName = airline[0];
          let routes = routesGroupByAirline[airlineName];
          routes.splice(300, 1200);
          if (!routes) {
            return null;
          }
          return {
            type: "lines3D",
            name: airlineName,
            effect: {
              show: true,
              trailWidth: 3,
              trailLength: 0.3,
              trailOpacity: 1,
              trailColor: "#c655f2",
            },
            lineStyle: {
              width: 1,
              color: "#c655f2",
              opacity: 0.5,
            },
            blendMode: "lighter",
            data: routes.map((item) => {
              return [airports[item[1]].coord, airports[item[2]].coord];
            }),
          };
        });

      series.push({
        type: "scatter3D",
        coordinateSystem: "globe",
        // blendMode: "lighter",
        symbolSize: 2,
        itemStyle: {
          color: "#1391fc",
          opacity: 1,
        },
        data: pointsData,
      });

      earchChar.setOption({
        globe: {
          // top: 90,
          // baseTexture: "https://253-assets.oss-cn-hangzhou.aliyuncs.com/images/earth.jpg",
          baseTexture: earth,
          heightTexture: earth,
          shading: "realistic",
          light: {
            ambient: {
              intensity: 0.6,
            },
            main: {
              intensity: 0.7,
            },
          },
          viewControl: {
            autoRotateSpeed: 5,
            zoomSensitivity: 0,
            targetCoord: [100.46, 19.92],
          },
        },
        series,
      });
    });
  };

  /* ========== 初始化 ========== */
  useEffect(() => {
    getJson();
  }, []);

  return (
    <div style={{ width: "100%", height: "100%" }} ref={ref}></div>
  );
};
